<template>
    <div class="articleComponent">

        <div class="articleList">
            <el-card class="box-card" v-for="(item,index) in articleList" :key="index"  shadow="hover" @click.native="toArticleDetail(item.id)">
                <el-row :gutter="20">
                    <el-col :span="21">
                        <div class="content">
                            <h4 class="title"> {{item.title}} </h4>
                            <p class="abstract"> {{item.summary}} </p>
                            <div class="meta">
                                <el-tag size="mini" class="el-icon-ali-eye"> 查看: {{item.look}}</el-tag>
                                <el-tag size="mini" type="warning"> <i class="iconfont el-icon-ali-ziyuan" style="font-size: 8px">&nbsp;</i> 点赞: {{item.likes}}</el-tag>
                                <span> 分类: <el-tag size="mini" type="danger">{{item.category.categoryName}}</el-tag></span>
                                <span> 标签: </span>
                                <span class="time" v-for="(item) in item.tags" :key="item.id">
                                    <el-tag size="mini" type="success">{{item.tagsName}}</el-tag>
                                </span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div>
                            <el-image class="articlesImage"
                                      style="= height: 100px;float: left"
                                      fit="fill"
                                      :src="item.imgUrl"/>
                        </div>
                    </el-col>
                </el-row>

            </el-card>
        </div>


    </div>

</template>

<script>

    export default {
        name: "articleList",
        props:[
            'articleList',

        ],
        data() {
            return {
            }
        },
        mounted: function () {
        },
        methods: {

            /**
             * 跳转到文章详情页
             * @param articleId
             */
            toArticleDetail(articleId){
                console.log(articleId)
                this.$router.push({
                    path: `/articles/articleDetail/${articleId}`
                })
            }
        }
    }
</script>

<style scoped>

    .title{
        color: #333;
        margin: 7px 0 4px;
        display: inherit;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
    }

    .box-card {
        margin: 10px auto;
    }

    .abstract {
        min-height: 30px;
        margin: 0 0 8px;
        font-size: 13px;
        line-height: 24px;
        color: #555;
    }
    .meta{
        padding-right: 0!important;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }
    span{
        margin-right: 10px;
        color: #666;
    }

</style>
